<!--  -->
<template>
  <div>
       <div class="header"  v-show="showHed" :style="{opacity:opt}">
          <span class="s1">
              <router-link to="/">
                <i class="iconfont">&#xe667;</i>
              </router-link>
          </span>
          <span>{{itemText}}</span>
      </div>
      <div class="bgimg"  @click="shade">
        <div class="bgimg_top">
            <img :src="itemImg" alt="">
            <div class="prev">
                <router-link to="/">
                <i class="iconfont">
                    &#xe667;
                </i>
                </router-link>
            </div>
            <div class="bgtext">
                {{itemText}}(AAAA景区)
            </div>
        </div>
      </div>
      <!-- 遮罩 -->
      <div class="shade" v-show="shadeshow" @click="zhezao">

           <swiper :options="swiperOption" ref="mySwiper">
            <!-- slides -->
            <swiper-slide>
                <img :src="itemImg" alt="">
            </swiper-slide>
            <swiper-slide>
                <img :src="itemImg" alt="">
            </swiper-slide>
            <swiper-slide>
                <img :src="itemImg" alt="">
            </swiper-slide>
            <!-- Optional controls -->
            <div class="swiper-pagination"  slot="pagination"></div>
            </swiper>
          <span>{{itemText}}</span>
      </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
        "itemImg":"",
        "itemText":"",
        showHed:false,
        shadeshow:false,
        scrooll:"",
        opt:0,
        changeTop:"",
        swiperOption: {
	    	pagination: {
                el: '.swiper-pagination',
                type:'fraction'
	        }
	    }
    };
  },
  mounted(){
      window.addEventListener('scroll', this.menu) 
  },
  methods:{
      menu () {
          let scrooll = document.documentElement.scrollTop;
          let changeTop=scrooll/100;
          changeTop=changeTop>1?1:changeTop
           if(scrooll > 0){
                this.showHed = true;
                this.opt=changeTop;
           }
      },
      shade(){
          this.shadeshow = true;
      },// 遮罩层
      zhezao(){
          this.shadeshow=false;
      }
     
  },
    updated() {
            window.scroll(0, 0); // 处理页面跳转的时候头部固定
        },
    activated(){
            this.itemImg=this.$route.query.text;
            this.itemText=this.$route.query.concat// 接收过来的路径传值
        }
}

</script>
<style scoped lang="scss" scoped>

 .swiper-container{
    position: relative;
    height: 4.66666rem;
  }
  .swiper-slide img{
	width:100%;
  height: 100%;
}
 .swiper-pagination   >>> .swiper-pagination-bullet-active {
	background: #fff ;
  font-size: 0.2133333333rem;

}
.swiper-container  >>> .swiper-pagination{
    color: #fff;
}
// .swiper-pagination{
//     color: #fff!important;
// }
.bgimg{
    width: 100%;
    height: 2000px;
    .bgimg_top{
        width: 100%;
        height: 200px;
        position: relative;
        img{
            width: 100%;
            height: 100%;
        }
        .prev{
            position: absolute;
            top: 5px;
            left: 5px;
            i{
                width: 30px;
                height: 30px;
                text-align: center;
                line-height: 30px;
                display: inline-block;
                border-radius: 50%;
                background: rgba(0,0,0,0.5);
                color: #fff;
            }
        }
        .bgtext{
            position: absolute;
            bottom: 20px;
            left: 15px;
            font-size: 18px;
            color: #fff;
        }
    }
}





a{
    text-decoration: none;
    color: #fff;
}
    .header{
        z-index: 99;
        width: 100%;
        height: 40px;
        background: #00bcd4;
        text-align: center;
        line-height: 40px;
        color: #fff;
        position:fixed;
        top: 0;
        left: 0;
        opacity: 0;
        .s1{
            position: absolute;
            left: 5px;
            i{
                font-size: 20px;
            }
        }
        span{
            font-size: 16px;
            height: 40px;
            line-height: 40px;
        }
    }
.shade{
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background: #000;
    z-index: 55;
    img{
        height: 200px;
    }
}
</style>